<template>
    <div class="container">
        <!-- 侧栏 -->
		<Sidebar/>
		<!-- 头部 -->
		<Header :search_show="search_show" />
        <div class="content Gwidth">
            <div class="search">
                <AutoComplete v-model="keyword" placeholder="请输入品牌、厂家"></AutoComplete>
                <Button class="submit" @click="searchClick">搜索</Button>
            </div>
            <div class="tips" v-show="is_val">
                <span>为您找到以下关于“</span>
                <span style="color:#F30213">{{search_val}}</span>
                <span>”的相关结果</span>
            </div>
            <div class="tips" v-show="!is_val">
                <span>抱歉，没有找到“</span>
                <span style="color:#F30213">{{search_val}}</span>
                <span>”的相关结果。为您推荐其他商家</span>
            </div>
            <div class="cont">
                <ShopList 
                    :searchVal='search_val' 
                    v-for="(item,index) in list" 
					:key="index" 
					:logo="item.logo"
					:brand_name="item.company_name"
					:phone="item.phone"
					:category_name="[]"
					:shopAddress="item.address"
					:appoin_num="item.appoin_num"
                    :target_id="item.store_id"
                />
            </div>
            
        </div>
    </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
import Header from "~/components/Header.vue";
import Sidebar from "~/components/Sidebar.vue";
import ShopList from "~/components/ShopList.vue";
export default {
    components: {
		Header,
		Sidebar,
        ShopList
	},
    data(){
        return{
            keyword:'',
            search_val:'',
            is_val:true,
            search_show:false,
            list:[]
        }
    },
    created(){
        if (this.$route.query.keyword) {
            this.keyword = this.$route.query.keyword
            this.searchStoreList()
        }
       
    },
    computed:{
		...mapState(['address'])
	},
    mounted(){
        
    },
    methods:{
        searchClick(){
            if (!this.keyword) {
                this.$Message.error('请输入搜索内容');
                return
            }
            this.list = []
            this.searchStoreList()
        },
        // 搜索
        async searchStoreList(){
			let {data:{code,data}} = await this.$http.post(this.$API.search.searchStoreList,{
                keyword:this.keyword
            })
            this.search_val = this.keyword
            if (code==200) {
                this.is_val = true
                this.list = data.data
            }else if (code==4001) {
                this.is_val = false
                this.list = data.data
            }
            else{
                this.list = []
            }
		},
    }
}
</script>
<style scoped>
    .container .content{
        width: 862px;
        margin: 30px auto;
    }
    .container .content .search{
        display: flex;
        align-items: center;
        width: 561px;
        height: 44px;
        background: #FFFFFF;
    }
    .container .content .search button{
        width: 120px;
        height: 44px;
        background: #F30213;
        border-radius: 0px 4px 4px 0px;
        font-size: 16px;
        font-weight: 400;
        color: #FFFFFF;
    }
    .container .content .search>>>.ivu-input{
        height: 44px;
        background: #FFFFFF;
        border-right: 0;
    }
    .container .content .tips{
        margin-top: 40px;
    }
    .container .content .tips span{
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
    }
</style>
